<template>
	<view class="container">
		<uni-section title="小东商场" type="line">
			<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar">
				<template v-slot:title>
					<uni-list>
						<uni-list-item title="用户登录" />
					</uni-list>
				</template>
				<image style="width: 100%;" :src="cover"></image>
				<view class="example">
					<!-- 基础表单校验 -->
					<uni-forms ref="valiForm" :modelValue="valiFormData">
						<uni-forms-item label="用户名" required name="name">
							<uni-easyinput v-model="valiFormData.name" placeholder="请输入用户名" />
						</uni-forms-item>
						<uni-forms-item label="密码" required name="password">
							<uni-easyinput focus type="password" v-model="valiFormData.password" placeholder="请输入密码" />
						</uni-forms-item>
						<uni-forms-item label="验证码" name="code">
							<uni-easyinput type="text" v-model="valiFormData.code" placeholder="请输入验证码" />
							<image class="login-codeimg" :src="codeUrl" @click="getCode"></image>
						</uni-forms-item>
					</uni-forms>
					<button type="primary" @click="submit()">登录</button>
				</view>

			</uni-card>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		useStore
	} from "vuex"
	import {
		getCodeImg,
		login
	} from "../../utils/login.js"
	import {
		setToken
	} from "../../utils/requst.js"
	import {
		ref
	} from 'vue';
	const codeUrl = ref('')
	const cover = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
	const avatar = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png')
	const extraIcon = ref({
		color: '#4cd964',
		size: '22',
		type: 'gear-filled'
	})
	const store = useStore()
	// 校验表单数据
	const valiFormData = ref({
		name: 'admin',
		password: 'admin123',
		code: '',
		uuid: "",
	})
	const submit = (() => {
		login(
				valiFormData.value.name,
				valiFormData.value.password,
				valiFormData.value.code,
				valiFormData.value.uuid
			)
			.then((res1) => {
				let res = res1.data;
				uni.setStorageSync("token", res.token);
				uni.setStorageSync("mylogin", "yes");
				setToken(res.token);
				store.commit("login", valiFormData.value.username);
				uni.switchTab({
					url: "/pages/index/index"
				}); //有效跳转
				uni.showToast({
					title: `登录成功`
				})
			})
			.catch((error) => {
				console.log(error);
			});
	})
	const getCode = (() => {
		getCodeImg().then((res1) => {
			let res = res1.data;
			codeUrl.value = "data:image/gif;base64," + res.img;
			valiFormData.value.uuid = res.uuid;
		});
	})
	created(()=>{
		console.log(111);
	})
	
</script>

<style lang="scss">
	.login-codeimg {
	  cursor: pointer;
	  /* vertical-align: middle; */
	  width: 44%;
	  height: 30px;
	  margin-top: 20px;
	  float: right;
	}
	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}
</style>